<template>
<a-row class="warn-box" style="margin:.5em 0; height: 100%">
    <a-card size="small" hoverable style="min-height: 45vh">
        <p slot="title">
            <span style="color: rgba(0, 0, 0, 0.65)">{{ $t('Warning_info') }}</span>
        </p>
        <!-- <p><b>{{$t('Warning')}} </b></p> -->
        <router-link slot="extra" :to='{name:"alertList"}'>{{$t('More')}}</router-link>
        <a-table 
            :columns='warncolumns'
            rowKey="id"
            :dataSource='warndata' 
            size='small' 
            :pagination='false' 
            :scroll='{y:260}' 
            :rowClassName='setClass' 
            :loading="loading"
            :locale="defaultSetting"
        >
            <div slot="severity" slot-scope='severity'>
                <span v-if="severity == '严重'">
                    <a-badge color="red"></a-badge>
                    {{$t('Urgent')}}
                </span>
                <span v-else-if="severity == '警告'">
                    <a-badge color="orange"></a-badge>
                    {{$t('Important')}}
                </span>
                <span v-else-if="severity == '提示'">
                    <a-badge color="yellow"></a-badge>
                    {{$t('Warning')}}
                </span>
            </div>
        </a-table>
    </a-card>
</a-row>
</template>

<script>
// const warncolumns=[
//     {title:this.$t('Alert')+this.$t('Reason'),dataIndex:'content',key:'content',width:200},
//     {title:this.$t('Occur')+this.$t('Time'),dataIndex:'date',key:'date',width:150},
//     {title:this.$t('Urgent')+this.$t('Level'),dataIndex:'severity',key:'severity',width:100,scopedSlots:{customRender:'severity'}}
// ]
import EmptyData from '@/components/common/EmptyData'

import request from '@/request/request'

export default {
    name: 'Warn',
    components: { EmptyData },
    data() {
        return {
            warncolumns: [
                {
                    title: this.$t('Urgent') + this.$t('Level'),
                    dataIndex: 'severity',
                    key: 'severity',
                    ellipsis: true,
                    width: 80,
                    align: 'center',
                    scopedSlots: {
                        customRender: 'severity'
                    }
                },
                {
                    title: this.$t('Alert') + this.$t('Reason'),
                    dataIndex: 'des',
                    key: 'des',
                    ellipsis: true,
                    width: 200
                },
                {
                    title: this.$t('Occur') + this.$t('Time'),
                    dataIndex: 'start_time',
                    key: 'start_time',
                    ellipsis: true,
                    width: 150
                }
            ],
            timeoutId: '',
            warndata: [],
            warndata_ch: [],
            warndata_en: [],
            loading: true,
            defaultSetting: {emptyText:<EmptyData />}
        }
    },
    computed: {
        getlanguage() {
            return this.$store.state.language
        }
    },
    watch: {
        getlanguage(val) { //监听语言切换，切换data组件内的多语言
            this.warncolumns = [
                {
                    title: this.$t('Urgent') + this.$t('Level'),
                    dataIndex: 'severity',
                    key: 'severity',
                    ellipsis: true,
                    align: 'center',
                    width: 80,
                    scopedSlots: {
                        customRender: 'severity'
                    }
                },
                {
                    title: this.$t('Alert') + this.$t('Reason'),
                    dataIndex: 'des',
                    key: 'des',
                    ellipsis: true,
                    width: 200
                },
                {
                    title: this.$t('Occur') + this.$t('Time'),
                    dataIndex: 'start_time',
                    key: 'start_time',
                    ellipsis: true,
                    width: 150
                }                
            ];
            if(val == 'zh') {
                this.warndata = this.warndata_ch;
            }else {
                this.warndata = this.warndata_en;
            }
        }
    },
    mounted() {
        this.getdata()
        this.timeoutId = setInterval(this.getdata, 90000);
    },
    destroyed() {
        clearInterval(this.timeoutId); //清除定时器
    },
    methods: {
        getdata() {
            this.loading = true
            // 只显示未处理的告警 0：代表所有的告警，1：没有处理的告警，2：已经处理的告警
            request('get', 'Alert/alerts_mess', {
                // params: {
                    sort: 1,
                    status: 0,
                    start: 0,
                    end: 5,
                // }
            }).then(res => {
                if(res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
                }else {
                    if(this.$i18n.locale == 'zh') {
                        this.warndata = res.data.data;
                    }else {
                        this.warndata = res.data.en_result;
                    }
                    this.warndata_ch = res.data.data;
                    this.warndata_en = res.data.en_result;
                }
            }).catch(err => {
                this.loading = false
            }).finally(() => {
                this.loading = false
            })
        },
        setClass(record, index) {
            // 后台需要做一下翻译
            // return (record.severity === this.$t('Urgent')?'redbg':record.severity === this.$t('Less-Urgent')?'purplebg':record.severity === this.$t('Common')?'greenbg':'')
            // return (record.severity === '紧急' ? 'redbg' : record.severity === '重要' ? 'purplebg' : record.severity === '警告' ? 'greenbg' : '')
        }
    }
}
</script>

<style scoped>
.redbg {
    background-color: #FFEAEF;
    padding: .5rem
}

.purplebg {
    background-color: #F0F0FC
}

.greenbg {
    background-color: #E6F8F8
}
</style>
